<template>
  <div class="contact-container">
<!--    内容区域-->
    <div class="contact-main">
<!--      每一项-->
      <div v-for="(item,index) in contactData" :key="index" class="contact-term">
      <div class="contact-pag">
        <div class="icon" :class="item.type ==='weixin'? 'weixin':''"><Icon :type="item.type"/></div>
        <span>{{item.message}}</span>
      </div>
      <div class="pop">
        <img :src="item.src">
      </div>
      </div>
<!--      每一项结尾-->
    </div>
  </div>
</template>

<script>
import Icon from '@/components/Icon'
export default {
  name: 'index',
  components: {
    Icon
  },
  props: {
    contactData: {
      type: Array,
      required: true
      // type:icon，message:显示信息，src:弹出图片
    }
  }
}
</script>

<style lang="less" scoped>
  @import "../../../styles/var";
  .contact-container{
    width: 100%;
    padding: 20px;
    margin: 0;
    color: @gray;
    @itemHeight:30px;
    .contact-term {
      height: @itemHeight;
      line-height: 30px;
      cursor: pointer;
      position: relative;
      margin: 8px 0px;
      &:hover .pop{
        transform: scaleY(1);
      }
      .contact-pag {
        display: flex;
        align-items: center;
        font-size: 14px;
        .icon{
          font-size: 26px;
          width: 36px;
          &.weixin{
            text-indent: -3px;
            font-size: 32px;
          }
        }
      }
      .pop{
        position: absolute;
        left: 0;
        bottom: @itemHeight + 5px;
        padding: 10px 15px;
        background: #fff;
        border-radius: 5px;
        transform: scaleY(0);
        transition: .5s;
        transform-origin: center bottom;
        img{
          width: 150px;
          height: 150px;
        }
        &::after{
          content: '';
          position: absolute;
          left: 50%;
          transform: translateX(-50%) rotate(45deg);
          background: #ffffff;
          width: 8px;
          height: 8px;
          bottom: -4px;
        }
      }
    }
  }
</style>
